<template>
	<div class="second-child">
		<h1>这是secondChild-{{parentToMe.m_id}}</h1>
		<span>{{message}}</span>
		<div class="components-wrap">
			<h4>{{parentToMe.title}}</h4>
			<span class="author">{{parentToMe.author}}</span>
			<div class="circle">
				<div class="pictrue" :class="{'anim':parentToMe.isStart}">
					<img :src="parentToMe.imgUrl" alt="">
				</div>
				<div :class="{'start':!parentToMe.isStart,'pause':parentToMe.isStart}" @click="toggleState(parentToMe)">
				</div>
			</div>
			<span class="subtext">{{parentToMe.subtext}}</span>
			<p class="desc">{{parentToMe.description}}</p>
			<span class="time">{{parentToMe.time}}</span>
		</div>
	</div>
</template>

<script>
import bus from '../assets/js/eventBus'

export default {
  name: 'secondChild',
  data () {
    return {
    	message:'',
    	pIndex: 0
    }
  },
  props:['parentToMe'],
  mounted () {
  	var self = this
  	bus.$on('userDefinedEvent', function(message){
  		self.message = message
  	})
  },
  methods:{
  	toggleState: function(obj){
  		this.$emit("toggleByParent",obj)
  	}
  }
}
</script>

<style scoped>
.second-child{
  border-bottom: 1px dashed #ddd;
}
.components-wrap{
	border-bottom:1px dotted #999;
	padding:10px;
}
.author,.time{
	font-size:12px;
}
.subtext{
	font-size:13px;
}
.desc{
	font-size:14px;
}
.anim{
	-webkit-animation: rotateCircle 2s infinite linear;
}

@-webkit-keyframes rotateCircle{
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(360deg);
	}
}
.circle{
	width:200px;
	height:200px;
	border:1px solid #ddd;
	border-radius: 50%;
	margin: 15px auto;
	position: relative;
}
.pictrue,.start,.pause{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	border-radius: 50%;
}
.pictrue>img{
	width:100%;
	height:100%;
	border-radius: 50%;
	display: block;
}
.start,.pause{
	background-color: rgba(0,0,0,0.3);
	cursor:pointer;
}
.start:hover,.pause:hover{
	background-color: rgba(0,0,0,0.6);
}
.start:before{
	content:"";
	width: 60px;
	height: 60px;
	position: absolute;
	top: 35%;
	left:35%;
	border-radius: 50%;
	background-color: #fff;
}
.pause:before{
	content:"";
	width: 60px;
	height: 60px;
	position: absolute;
	top: 35%;
	left:35%;
	border-radius: 50%;
	background-color: #3EB57D;
}
</style>
